feat(datetime): add header parts by thetaPC · Pull Request #30945 · ionic-team/ionic-framework

thetaPC · 2026-02-04T18:24:02Z

Issue number: resolves #30083, resolves #30830

What is the current behavior?

There's no way to customize the header when using a grid style. This includes the entire header, prev/next buttons, and the days of the week container. The only section that can customized within the header is the month/year picker. This limits developers from being able to make changes to match their styles.

What is the new behavior?

Added parts to the header container, prev/next buttons, prev button, next button, and days of the week container.
Added tests for the next parts.
Added a test for the existing month/year picker part.
Updated the custom test page to show how to use all the parts mentioned: header container, month/year picker, prev/next buttons, prev button, next button, and days of the week container

Does this introduce a breaking change?

Yes
No

Other information

Preview

vercel · 2026-02-04T18:24:08Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Feb 17, 2026 10:25pm

thetaPC · 2026-02-04T18:24:30Z

core/src/components/datetime/test/custom/datetime.e2e.ts

+      expect(backgroundColor).toBe('rgb(218, 216, 255)');
+    });
+
+    test('should be able to customize month/year picker part within the grid style', async ({ page }, testInfo) => {


We didn't have a test for this so I added it.

ShaneK

This looks good to me! Awesome work!

brandyscarney

Looks good! A few requests & questions.

brandyscarney · 2026-02-17T18:39:19Z

core/src/components/datetime/datetime.tsx

+                aria-label="Previous month"
+                disabled={prevMonthDisabled}
+                onClick={() => this.prevMonth()}
+                part="prev-next-buttons prev-button"


I'm torn on the prev-next-buttons naming because usually we just name it a shared name like in the components that have helper text & error text we call them supporting-text:

<div class="helper-text" part="supporting-text helper-text">{helperText}</div> <div class="error-text" part="supporting-text error-text">{errorText}</div>

I would think we would do something similar here like:

Suggested change

part="prev-next-buttons prev-button"

part="navigation-button previous-button"

I spelled out previous because using full words improves readability and makes translations easier.

Navigation buttons sound better! 8dc99f4

brandyscarney · 2026-02-17T18:42:29Z

core/src/components/datetime/datetime.tsx

+                aria-label="Next month"
+                disabled={nextMonthDisabled}
+                onClick={() => this.nextMonth()}
+                part="prev-next-buttons next-button"


Suggested change

part="prev-next-buttons next-button"

part="navigation-buttons next-button"

See my previous comment

brandyscarney · 2026-02-17T19:31:33Z

core/src/components/datetime/test/custom/datetime.e2e.ts

+      expect(backgroundColor).toBe('rgb(255, 165, 0)');
+    });
+
+    test('should be able to customize calendar header part within the grid style', async ({ page }) => {


Do we need to say within the grid style on all of these?

brandyscarney · 2026-02-17T19:33:09Z

core/src/components/datetime/test/custom/datetime.e2e.ts

+      expect(backgroundColor).toBe('rgb(173, 216, 230)');
+    });
+
+    test('should be able to customize prev/next buttons part within the grid style', async ({ page }, testInfo) => {


Could we combine this test with the previous & next button part tests? Maybe the one targeting both could apply background color while the individual parts could apply text color.

brandyscarney · 2026-02-17T19:33:49Z

core/src/components/datetime/test/custom/datetime.e2e.ts

+        `
+          <style>
+            ion-datetime::part(days-of-week) {
+              background-color: #9ad162;


Nit: Can we stick with named colors to make it easier to verify the rgb matches up?

core/src/components/datetime/datetime.tsx

brandyscarney · 2026-02-17T19:40:23Z

core/src/components/datetime/datetime.tsx

Why don't we expose datetime-selected-date?

brandyscarney · 2026-02-17T19:57:14Z

core/src/components/datetime/datetime.tsx

          </div>
        </div>
-        <div class="calendar-days-of-week" aria-hidden="true">
+        <div class="calendar-days-of-week" aria-hidden="true" part="days-of-week">


Do you think we should call this calendar-days-of-week to match the naming of calendar-header? I am wondering if it's confusing that we have calendar-day and calendar-header but then stop prefixing with calendar. We probably can't enforce this though without causing breaking changes since month-year-button is released already.

ion-datetime,part,calendar-day ion-datetime,part,calendar-header ion-datetime,part,datetime-header ion-datetime,part,days-of-week ion-datetime,part,month-year-button ion-datetime,part,next-button ion-datetime,part,prev-button ion-datetime,part,prev-next-buttons ion-datetime,part,time-button ion-datetime,part,wheel ion-datetime,part,wheel-item

I'm not against it. The original thought was trying to keep it short but I'm convinced to keep it consistent. We should reconsider the naming during ionic modular work. 0bc7bf3

brandyscarney · 2026-02-17T20:04:36Z

core/src/components/datetime/datetime.tsx

 * layout with `presentation="date-time"` or `"time-date"`.
 * @part time-button active - The time picker button when the picker is open.
 *
+ * @part calendar-header - The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.


Suggested change

* @part calendar-header - The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.

* @part calendar-header - The calendar header manages the date navigation controls (month/year picker and previous/next buttons) and the days of the week when using a grid style layout.

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

…nto FW-6997

feat(datetime): add header parts to grid style

d9b4f9e

github-actions bot added the package: core @ionic/core package label Feb 4, 2026

thetaPC commented Feb 4, 2026

View reviewed changes

vercel bot deployed to Preview February 4, 2026 18:25 View deployment

thetaPC marked this pull request as ready for review February 4, 2026 22:39

thetaPC requested a review from a team as a code owner February 4, 2026 22:39

thetaPC requested review from OS-jacobbell and ShaneK and removed request for OS-jacobbell February 4, 2026 22:39

feat(datetime): add parts to calendar-header and datetime-header

fda0949

vercel bot deployed to Preview February 5, 2026 23:10 View deployment

thetaPC changed the title ~~feat(datetime): add header parts to grid style~~ feat(datetime): add header parts Feb 6, 2026

ShaneK approved these changes Feb 6, 2026

View reviewed changes

brandyscarney reviewed Feb 17, 2026

View reviewed changes

brandyscarney mentioned this pull request Feb 17, 2026

feat(datetime): add new header parts ionic-team/ionic-docs#4402

Open

2 tasks

thetaPC added 2 commits February 17, 2026 13:36

feat(datetime): rename nav buttons part

8dc99f4

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

test(datetime): update titles

e5caf3a

vercel bot deployed to Preview February 17, 2026 21:38 View deployment

vercel bot deployed to Preview February 17, 2026 21:40 View deployment

test(datetime): switch from hex values

8b520d1

vercel bot deployed to Preview February 17, 2026 21:45 View deployment

feat(datetime): add datetime title part

50c8f09

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

vercel bot deployed to Preview February 17, 2026 21:48 View deployment

feat(datetime): datetime-title part cleanup

89f0da5

vercel bot deployed to Preview February 17, 2026 21:57 View deployment

feat(datetime): add selected date part

4f61593

vercel bot deployed to Preview February 17, 2026 22:04 View deployment

feat(datetime): switch to previous-button naming

25a3984

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

vercel bot deployed to Preview February 17, 2026 22:13 View deployment

feat(datetime): update days of the week part name

0bc7bf3

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

vercel bot deployed to Preview February 17, 2026 22:16 View deployment

thetaPC added 2 commits February 17, 2026 14:22

test(datetime): combine navigation buttons tests

ac0957c

Merge branch 'feature-8.8' of github.com:ionic-team/ionic-framework i…

fd14fd0

…nto FW-6997

vercel bot deployed to Preview February 17, 2026 22:25 View deployment

thetaPC requested a review from brandyscarney February 17, 2026 22:38

	part="prev-next-buttons prev-button"
	part="navigation-button previous-button"

	part="prev-next-buttons next-button"
	part="navigation-buttons next-button"

	* @part calendar-header - The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.
	* @part calendar-header - The calendar header manages the date navigation controls (month/year picker and previous/next buttons) and the days of the week when using a grid style layout.

Conversation

thetaPC commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thetaPC commented Feb 4, 2026 •

edited

Loading

vercel bot commented Feb 4, 2026 •

edited

Loading